<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" router @open="handleOpen" @close="handleClose">
		<el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path">
			<i class="el-icon-setting"></i>
			<span slot="title"
				><span>{{ item.lable }}</span></span
			>
		</el-menu-item>
		<el-submenu :index="item.path" v-for="item in hasChildren()" :key="item.path">
			<template slot="title">
				<i class="el-icon-menu"></i><span>{{ item.lable }}</span></template
			>
			<el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex">
				<component class="icons" :is="subItem.icon"></component><span>{{ subItem.lable }}</span></el-menu-item
			>
		</el-submenu>
	</el-menu>
</template>
<script>
export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: "Footer",
	setup() {
		const list = [
			{
				lable: "系统首页",
				path: "/index",
				icon: "user",
			},
			{
				lable: "账户模块",
				path: "/account",
				icon: "setting",
				children: [
					{
						lable: "个人主页",
						path: "/account/profile",
						icon: "setting",
					},
					{
						lable: "用户列表",
						path: "/account/users",
						icon: "setting",
					},
				],
			},
			{
				lable: "公共模块",
				path: "/common",
				icon: "el-icon-c-scale-to-original",
				children: [
					{
						lable: "图片列表",
						path: "/common/images",
					},
					{
						lable: "评论列表",
						path: "/common/comments",
					},
				],
			},
			{
				lable: "音乐模块",
				path: "/iting",
				icon: "play",
				children: [
					{
						lable: "音频列表",
						path: "/iting/audios",
					},
					{
						lable: "歌手列表",
						path: "/iting/singers",
					},
				],
			},
			{
				lable: "测试模块",
				path: "/test",
				icon: "flag",
				children: [
					{
						lable: "你好世界1",
						path: "/test/HelloWorld",
					},
					{
						lable: "你好世界2",
						path: "/test/HelloWorld2",
					},
					{
						lable: "你好世界3",
						path: "/test/helloWorld2",
					},
				],
			},
		];
		const noChildren = () => {
			return list.filter((item) => !item.children);
		};
		const hasChildren = () => {
			return list.filter((item) => item.children);
		};
		return {
			noChildren,
			hasChildren,
		};
	},

	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},
	},
};
</script>
<style scoped></style>
